<template>
  <page-header-wrapper>
    <a-card :bordered="true">
      <s-table
        row-key="key"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
        <span slot="status" slot-scope="text, record">
          <template v-if="record.is_have">
            <a-switch :checked="text | statusFilter" checked-children="开启" un-checked-children="禁用" @change="changeStatus($event, record.id)"></a-switch>
          </template>
          <template>
            暂无此插件
          </template>
        </span>
        <span slot="expire_time" slot-scope="text, record">
          {{ record.expire_time | timeFormat }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template v-if="record.is_have == 1 && record.is_can_update == 1">
            <a-button
              class="button_style"
              type="primary"
              @click="update(record)"
              size="small"
            >更新</a-button>
          </template>
          <template v-else-if="record.is_have == 0 && record.is_can_install == 1">
            <a-button
              class="button_style"
              type="primary"
              @click="download(record)"
              size="small"
            >安装</a-button>
          </template>
          <template v-else>
            不可更新或安装
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getList, updatePluginStatus, installPlugin, updatePlugin } from '@/api/plugin'
const STATUS = {
  0: false,
  1: true
}
const columns = [
  {
    title: '插件名称',
    dataIndex: 'name'
  },
  {
    title: '插件标识',
    dataIndex: 'key'
  },
  {
    title: '过期时间',
    dataIndex: 'expire_time',
    scopedSlots: { customRender: 'expire_time' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'RechargeList',
  components: {
    STable
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 表头
      columns,
      selectRadio: null,
      records: {},
      selectedLevel: String,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        Object.assign(parameter, this.queryParam)
        return getList(parameter).then(res => {
          return res.data
        })
      }
    }
  },
  created () {
  },
  filters: {
    statusFilter (key) {
      return STATUS[key]
    }
  },
  methods: {
    resetSearchForm () {
      this.queryParam = {
      }
    },
    changeStatus: function (value, id) {
      const status = Object.keys(STATUS).find(key => STATUS[key] === value)
      var params = {
        id: id,
        status: status
      }
      this.modalLoading = true
      updatePluginStatus(params).then(res => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('更新成功！')
        }
      })
    },
    radioChange (e) {
      this.selectRadio = e.target.value
    },
    update (record) {
      var params = {
          key: record.key,
          version: record.version,
          main_version: record.main_version,
          is_can_install: record.is_can_install,
          is_can_update: record.is_can_update
        }
      this.modalLoading = true
      updatePlugin(params).then(res => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('更新成功！')
        }
      })
    },
    download (record) {
      var params = {
        key: record.key,
        version: record.version,
        main_version: record.main_version,
        is_can_install: record.is_can_install,
        is_can_update: record.is_can_update
      }
      this.modalLoading = true
      installPlugin(params).then(res => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('安装成功！')
        }
      })
    }
  }
}
</script>
